<template>
    <div class="settings-email-box">
        <el-form :model="changeEmailForm" :ref="formName"
                 class="change-email-form"
                 label-width="100px"
                 size="medium">
            <el-form-item
                prop="newEmail"
                label="新邮箱地址"
                :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]">
                <el-input v-model="changeEmailForm.newEmail"></el-input>
            </el-form-item>
            <el-form-item
                prop="verifyCode"
                label="验证码"
                :rules="[{ required: true, message: '请输入验证码', trigger: 'blur'}]">
                <el-input v-model="changeEmailForm.verifyCode" style="width: 250px;margin-right: 10px"></el-input>

                <el-button type="success" size="small" @click="getVerifyCode()"
                           :disabled="sendVerifyBtnText !== '获取验证码'"
                           v-text="sendVerifyBtnText">
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="updateEmail()">修改邮箱</el-button>

            </el-form-item>
        </el-form>

    </div>
</template>

<script>
import {getVerifyCode, updateEmail,} from "@/api/userApi";
import {success_code} from "@/utils/ResponseState";

export default {
    data() {
        return {
            formName: 'changeEmailForm',
            changeEmailForm: {
                newEmail: '',
                verifyCode: ''
            },
            sendVerifyBtnText: '获取验证码'
        };
    },
    methods: {
        updateEmail() {
            // check data
            this.$refs[this.formName].validate((valid) => {
                if (valid) {
                    // change server
                    updateEmail(this.changeEmailForm.newEmail, this.changeEmailForm.verifyCode).then(result => {
                        if (result.code === success_code) {
                            this.$message.success("更改邮箱成功！");
                        } else {
                            this.$message.warning(result.message)
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        getVerifyCode() {
            if (this.changeEmailForm.newEmail === "") {
                this.$message.warning("邮箱不能为空")
                return;
            } else {
                const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if (!reg.test(this.changeEmailForm.newEmail)) {
                    this.$message.warning("请输入有效的邮箱")
                    return;
                }
            }

            // change ui
            let clickBtnInterval = 30;

            let interval = setInterval(() => {
                clickBtnInterval--;
                if (clickBtnInterval <= 0) {
                    this.sendVerifyBtnText = "获取验证码";
                    clearInterval(interval)
                    return;
                }

                this.sendVerifyBtnText = "重新发送(" + clickBtnInterval + ")";
            }, 1000);

            getVerifyCode(this.changeEmailForm.newEmail).then(result => {
                if (result.code === success_code) {
                    this.$message.success("发送验证码成功，注意查收！");
                } else {
                    this.$message.warning(result.message)
                }
            })
        }
    }
}

</script>

<style scoped>
.change-email-form {
    max-width: 500px;
}
</style>